<template>
	<view class="content">
		<view class="nav nav_bar" :style="`background: ${tab == 5 ? '#FB2545' : '#FFF'}`">
			<uni-nav-bar left-icon="left" title="商家中心" :right-icon="tab == 1 || tab == 2 ? 'plus' : ''"
				:right-text="tab == 3 ? '账户' : ''" :border='false' :color="tab == 5 ? '#FFF' : '#333'"
				:background-color="tab == 5 ? '#FB2545' : '#FFF'" @clickRight="onclickRight"
				@clickLeft="$native.backAction()"></uni-nav-bar>
		</view>
		<view class="nav_box"></view>
		<view class="store_tab">
			<scroll-view :scroll-x="true" :show-scrollbar="false">
				<view class="controller flex_center" style='width: 740rpx;' :id="tab == 5 ? 'theamColor' : ''">
					<view class="btn flex_c" v-for="(item,index) in icon" :key="index" @click="onTab(item.tab)"
						:id="tab == item.tab ? 'select' : ''">
						<image :src="item.icon" mode="aspectFill"></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<view style="height: calc(128rpx + 64rpx);"></view>

		<storeOrderVue v-if="tab == 0" ref="order"></storeOrderVue>
		<storeProduct v-if="tab == 1" ref="product"></storeProduct>
		<storeStaff v-if="tab == 2" ref="staff"></storeStaff>
		<storeIncome v-if="tab == 3" ref="income"></storeIncome>
		<storeGeneralization v-if="tab == 4" ref="generalization"></storeGeneralization>
		<storeFlow v-if="tab == 5" ref="flow"></storeFlow>


		<!-- 添加员工弹窗 -->
		<!-- add_staff_bg -->
		<u-popup :safeAreaInsetBottom="false" :show="show_staff" mode="center" bgColor="transparent" @close="show_staff = false">
			<view class="addStaff flex_c">
				<input type="text" v-model="mobile" placeholder="请输入员工手机号" placeholder-class="input-placeholder" />
				<view class="btn_view" @click="addStaff">继续添加</view>
				<view class="close" @click="show_staff = false">
					<u-icon name="close-circle" color="#FFF" size="28"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import storeOrderVue from './order/storeOrder.vue'
	import storeProduct from './product/storeProduct.vue'
	import storeStaff from './staff/storeStaff.vue'
	import storeIncome from './income/income.vue'
	import storeFlow from './flow/flow.vue'
	import storeGeneralization from './generalization/generalization.vue'
	export default {
		components: {
			// 订单
			storeOrderVue,
			// 商品
			storeProduct,
			// 员工
			storeStaff,
			// 收益
			storeIncome,
			// 推广
			storeGeneralization,
			// 流量
			storeFlow,
		},
		data() {
			return {
				icon: [{
						"title": "订单",
						"icon": "/static/store/store_order.png",
						"compents": '',
						"tab": 0,
					},
					{
						"title": "商品",
						"icon": "/static/store/store_product.png",
						"compents": '',
						"tab": 1,
					},
					{
						"title": "客服",
						"icon": "/static/store/store_staff.png",
						"compents": '',
						"tab": 2,
					},
					{
						"title": "收益",
						"icon": "/static/store/store_income.png",
						"compents": '',
						"tab": 3,
					},
					// {
					// 	"title": "推广",
					// 	"icon": "/static/store/store_gen.png",
					// 	"compents": '',
					// 	"tab": 4,
					// },
					// {
					// 	"title": "赚流量",
					// 	"icon": "/static/store/store_sign.png",
					// 	"compents": ''
					// }
				],

				tab: 0,

				show_staff: false,
				// 员工手机号
				mobile: '',
				
				store: {},
			}
		},
		methods: {
			onTab(e) {
				if (e == 4) {
					this.$util.toUrl('/pages/store/generalization/index')
				} else {
					this.tab = e;
					if(this.tab == 0){
						this.$nextTick(()=>{
							this.$refs.order.store = this.store;
						})
					}
				}
			},

			getUser() {
				this.$get('user/info').then(res => {
					uni.setStorageSync('user', res.data);
					this.getStoreInfo(res.data.store_id);
				});
			},

			// 点击右上角
			onclickRight() {
				if (this.tab == 1) {
					this.$util.toUrl('/pages/store/product/productAdd');
				}
				if (this.tab == 2) {
					this.show_staff = true;
					// this.$util.toUrl('/pages/store/staff/addTechnician');
				}
				if (this.tab == 3) {
					// this.$util.toUrl('/pages/bankcard/bankcard?from_web=1');
					this.$util.toUrl('/pages/bankcard/bankcard?from_web=1')
				}
			},

			addStaff() {
				this.$get('/store.store/signStaff', {
					mobile: this.mobile
				}).then(res => {
					this.show = false;
					this.$util.msg(res.msg)
				})
			},
		
			getStoreInfo(store_id){
				this.$get('/store/getStoreInfo',{
					store_id: store_id
				}).then(res=>{
					this.store = res.data;
					if(this.tab == 0){
						this.$refs.order.store = this.store;
					}
					uni.setStorageSync('store', res.data);
				})
			},
		},

		onLoad() {
			this.getUser();
		},
		onShow() {
			if (this.tab == 1) {
				// 商品
				this.$refs.product.list = [];
				this.$refs.product.page = 1;
				this.$refs.product.getList();
			}

			if (this.tab == 2) {
				this.$refs.staff.refresh();
			}

			if (this.tab == 4) {
				// 推广
				this.$refs.generalization.refresh()
			}
		},
		onReachBottom() {
			if (this.tab == 0) {
				// 订单
				this.$refs.order.getMore()
			}

			if (this.tab == 1) {
				// 商品
				this.$refs.product.getMore()
			}

			if (this.tab == 2) {
				// 员工
				this.$refs.staff.getMore();
			}

			if (this.tab == 3) {
				// 收益
				this.$refs.income.getMore();
			}

			if (this.tab == 4) {
				// 推广
				this.$refs.generalization.reachBottom()
			}

		},

		async onPullDownRefresh() {
			if (this.tab == 0) {
				// 订单
				await this.$refs.order.refresh();
			}
			if (this.tab == 1) {
				// 商品
				await this.$refs.product.refresh();
			}
			if (this.tab == 2) {
				// 员工
				await this.$refs.staff.refresh();
			}
			if (this.tab == 3) {
				// 收益
				await this.$refs.income.refresh();
			}
			if (this.tab == 4) {
				// 推广
				await this.$refs.generalization.refresh();
			}
			if (this.tab == 5) {
				// 赚流量
				await this.$refs.flow.refresh();
			}
		}

	}
</script>

<style scoped lang="less">
	.content {
		background: #ECECF4;
	}

	#theamColor {
		background: #FB2545;
	}

	.store_tab {
		/* Safari */
		position: fixed;
		top: calc(var(--paging-head-top) + 44px);
		left: 0;
		z-index: 10;

		scroll-view {
			width: 100vw;
			white-space: nowrap
		}

		.controller {
			padding: 32rpx;
			background: #ECECF4;

			.btn {
				width: 120rpx;
				height: 128rpx;
				background: #F7F7F9;
				border-radius: 24rpx;
				border: 2rpx solid #ECECED;
				padding-top: 14rpx;
				margin-right: 16rpx;

				image {
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 6rpx;
				}

				text {
					font-size: 28rpx;
					color: #131313;
				}
			}

			#select {
				background: #FFF7F8;
				border: 2rpx solid #FD2A53;
			}
		}
	}

	.addStaff {
		width: 640rpx;
		height: 553rpx;
		background: url('https://qiniu-cdn.maeiyun.com//h5static/store/add_staff_bg.png') 0 0 no-repeat;
		background-size: 100%;
		position: relative;

		input {
			font-size: 32rpx;
			color: #131313;
			width: 530rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx #DFDDF2;
			border-radius: 24rpx;
			padding: 0 32rpx;
			margin: 280rpx 0 24rpx;
			box-sizing: border-box;
		}

		.btn_view {
			width: 530rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

		.close {
			position: absolute;
			right: 0;
			top: 0;
		}
	}
</style>